4.2.1 Hello World template

A template is a html fragment that is rendered inside a portlet application.

Simplest template can be a Hello World template:

Hello World from a WCM Template

This template is pure static and it has not particular WCM tags, let's modify our Hello World template with some html and wcm markup:

<h1>Hello World from a WCM template</h1>
<wcm-list>
 <div><wcm-title></wcm-title></div>
 <div><wcm-img></wcm-img></div>
</wcm-list>

In this example we see a standard tag for heading and three news wcm tags:

• wcm-list tag creates a list of content iterating from a category defined in the configuration of WCM Content portlet.

In this example, the template tag will iterate over posts under category "Concert". In a template we can define several wcm-list tags linked with several categories defined in the configuration portlets. By default template links tags with category in the same order that categories are defined in configuration. We will see later how to modify this order with a specific link.

• wcm-title tag renders post title per each post iterated inside a wcm-list tag.

• wcm-img tag is a special tag that renders an image, this image is extracted from post body. In the example, it will extract first image found in the post. All tags combined render the following output:

This example is basic and it has not applied any style.

Like posts, we can link resources from uploads section, in the next code we are going to improve our example adding a css resource and combining with some html layout:

<link href="/wcm/rs/u/1020" rel="stylesheet" type="text/css" />
<div class="mockup-mobile-main">
  <div class="mockup-mobile-title">
    <h1>
      Ticket Monster's Magazine for Mobile
    </h1>
  </div>
  <wcm-list class="mockup-mobile-list">
    <div class="mockup-mobile-img">
      <wcm-link><wcm-img></wcm-img>
        </wcm-link>
    </div>

    <div class="mockup-mobile-text">
      <h2>
        <wcm-link><wcm-title></wcm-title>
          </wcm-link>
      </h2>

      <p>
        <wcm-excerpt max-length="180"> </wcm-excerpt>
      </p>
    </div>

  </wcm-list>
  <div class="mockup-mobile-footer">
     
  </div>
</div>

We can see two news wcm tags:

• wcm-link tag allows to create a link to show a post detail inside same WCM Content portlet. This post detail view is rendered with a specific template that can be configure in the WCM Content portlet configuration:

Our last example is called "Mobile Main Template" and it is configured as Main Template in the WCM Content portlet.

In this example there is also a template called "Mobile Post Template" configured as Post Template, this one will render the post iterated through wcm-link tag in the same WCM Content portlet:

• wcm-excerpt tag renders summary/excerpt field from post. This tag also has an attribute to limit output max length.

Now we are going to review a Post Template in our example. This template renders a post passed as parameter using previous wcm-link tag:

<link href="/wcm/rs/u/1020" rel="stylesheet" type="text/css" />
<wcm-param-single>
  <div class="mockup-mobile-main">
    <div class="mockup-mobile-title">
      <h1>
        <wcm-title></wcm-title>
      </h1>
    </div>

    <div class="mockup-mobile-img">
      <wcm-link><wcm-img></wcm-img>
        </wcm-link>
    </div>

    <div class="mockup-mobile-text">
      <h4>
        <wcm-excerpt max-length="180"> </wcm-excerpt>
      </h4>
      <wcm-content skipimages="0">

      </wcm-content>
    </div>
  </div>

</wcm-param-single>

We can see another two new tags in the Post Template:

• wcm-param-single tag allows to render post passed as parameter from wcm-link tag. Usual scenario is when we have defined a Post Template in a WCM Content configuration and we are rendering details of a post from a Main Template.

• wcm-content tag renders body field of a post. In the example uses the attribute skipimages="0" to not render the first image found in the body. This feature allows to combine tags wcm-img and wcm-content to extract images from body post and to render rest of body without repeating extracted images.